<template>
	<z-paging class="app-container" ref="paging" :fixed="false" refresher-only @query="getUserInfoData">
		<view class="user-info-box">
			<image class="page-bg" src="/static/images/mine-bg.png" mode="widthFix"></image>
			<view class="main-box">
				<view v-if="store.state.isLogin" class="user-info flex">
					<view class="head-portrait">
						<image class="cover-image" :src="userInfo.portrait" mode="aspectFill" />
					</view>
					<view class="content-box">
						<view class="nick-name-box">{{ userInfo.username }}</view>
						<view class="phone-box">{{ userInfo.phone }}</view>
					</view>
					<uni-icons type="right" size="30rpx" color="#333333"></uni-icons>
				</view>
				<view v-else class="user-info flex" @click="handleToPage('/pages/user/login')">
					<view class="head-portrait">
						<image class="cover-image" src="/static/images/head-portrait.png" mode="aspectFill" />
					</view>
					<view class="content-box">
						<view class="nick-name-box">未登录</view>
						<view class="phone-box">点击立即前往登录</view>
					</view>
					<uni-icons type="right" size="30rpx" color="#333333"></uni-icons>
				</view>
			</view>
		</view>
		<view class="cell-list">
			<view v-for="cell in cellList" :key="cell.id" class="cell-item flex" hover-class="is-hover"
				@click="handleClickCell(cell)">
				<image class="cell-icon" :src="cell.icon" mode="heightFix" />
				<text class="cell-title">{{ cell.title }}</text>
				<image class="arrow-icon" src="/static/icons/arrow-right-cell-icon.png" mode="widthFix" />
			</view>
		</view>
		<view v-if="store.state.isLogin" class="logout-button">
			<button type="primary" hover-class="is-hover" @click="handleLogout">退出登录</button>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from "vue";
	import store from "@/store";
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		showNotLoginModal
	} from "@/utils";
	import config from "@/config";

	const state = reactive({
		userInfo: {},
		cellList: [{
			id: 1,
			title: "实名认证",
			icon: "/static/icons/user-icon.png",
			url: `/pages/webView/index?url=${config.scanPage}`
		}, {
			id: 2,
			title: "已报名活动",
			icon: "/static/icons/sign-up-icon.png",
			url: "/pages/signUp/list"
		}, {
			id: 3,
			title: "我的收藏",
			icon: "/static/icons/like-icon.png",
			url: "/pages/collect/index"
		}]
	});

	const {
		userInfo,
		cellList
	} = toRefs(state);

	const paging = ref(null);

	// 获取用户信息
	async function getUserInfoData() {
		const res = await store.dispatch("GetUserInfo");
		userInfo.value = res.data;
		paging.value.complete();
	}

	// 点击菜单
	function handleClickCell(cell) {
		if (!store.state.isLogin) {
			return showNotLoginModal();
		}
		uni.navigateTo({
			url: cell.url
		})
	}

	// 退出登录
	function handleLogout() {
		uni.showModal({
			title: "温馨提示",
			content: "是否确认退出登录？",
			showCancel: true,
			success: async (result) => {
				if (!result.confirm) return;
				await store.dispatch("Logout");
				uni.showToast({
					title: "退出成功",
					icon: "none"
				})
				setTimeout(() => {
					paging.value.reload();
				}, 1000);
			}
		})
	}

	onShow(() => {
		getUserInfoData()
	})
</script>

<style scoped lang="scss">
	.app-container {
		.user-info-box {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;

			.page-bg {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 0;
			}

			.main-box {
				position: relative;
				z-index: 1;
				overflow: hidden;
				margin-top: 176rpx;

				.user-info {
					padding: 40rpx;
					gap: 30rpx;

					.head-portrait {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						overflow: hidden;
						border: 4rpx solid #FFFFFF;
					}

					.content-box {
						flex: 1;

						.nick-name-box {
							margin-bottom: 20rpx;
							font-size: 40rpx;
							font-weight: bold;
						}

						.phone-box {
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.cell-list {
			overflow-y: auto;
			margin: 20rpx 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			z-index: 2;

			.cell-item {
				padding: 35rpx 32rpx;
				height: 110rpx;
				box-sizing: border-box;
				column-gap: 20rpx;

				.cell-icon {
					max-width: 40rpx;
					height: 40rpx;
				}

				.cell-title {
					margin-left: 20rpx;
					font-size: 30rpx;
					flex: 1;
				}

				.arrow-icon {
					width: 12rpx;
					height: 20rpx;
				}
			}
		}

		.logout-button {
			margin: 40rpx 20rpx 0;

			button {
				background-color: #FFFFFF;
				color: #FF3333;
				font-weight: bold;
				letter-spacing: 6rpx;
			}
		}
	}
</style>